<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div class="page">
      <div class="menu">
        <div>x</div>
        <div>t</div>
        <div>z</div>
      </div>
      <div class="father">
        <div class="son">
            <div class="sonson">
                <div class="target"></div>
            </div>

        </div>
      </div>
    </div>
    <style>
      * {
        margin: 0;
      }
      .menu {
        visibility: hidden;
        position: fixed;
        left: 100px;
        top: 49px;

        width: 120px;
        height: 160px;
        background-color: cornsilk;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        z-index: 1000;
      }
      .page {
        width: 100%;
        height: 100vh;
        background-color: blueviolet;
      }
      .father{
          width: 120px;
          height: 160px;
          background-color: cornsilk;
      }
      .son{
          width: 60px;
          height: 100px;
          background-color: darkseagreen;
      }
      .sonson{
          width: 30px;
          height: 70px;
          background-color: rosybrown;
      }
      .target{
          width: 10px;
          height: 30px;
          background-color: red;
      }
    </style>
    <script>
      let page = document.querySelector(".page");
      let menu = document.querySelector(".menu");

      page.addEventListener("contextmenu", (e) => {
        e.preventDefault();
        // menu.style.display="block"
        menu.style.visibility = "visible";
        // console.log(e);
        console.log(e.clientX, e.clientY);

        let pageWidth = parseInt(getComputedStyle(page).width);
        let menuWidth = parseInt(getComputedStyle(menu).width);
        if (e.clientX + menuWidth < pageWidth) {
          menu.style.left = e.clientX + "px";
          console.log(pageWidth, menuWidth, e.clientX, "未超出w方向");
        } else {
          menu.style.left = pageWidth - menuWidth + "px";
          console.log(pageWidth, menuWidth, e.clientX, "已超出w方向");
        }
        // getComputedStyle(page).width
        // console.log("page.style.width",page.style.width)

        // menu.style.right =e.clientX + "px";
        console.log("page.style.width2", e.clientX);
        console.log(page);

        menu.style.top = e.clientY + "px";
      });
      page.addEventListener("click", (e) => {
        menu.style.visibility = "hidden";
        // menu.style.display="none";
      });
      menu.addEventListener("click", (e) => {
        e.stopPropagation();
      });
      let father  = document.querySelector(".father");
      let son = document.querySelector(".son");
      let sonson  = document.querySelector(".sonson");
      let target = document.querySelector(".target");
      father.addEventListener("click",(e)=>{
        // e.stopPropagation();
        console.log("father捕获",e.target)
      },true);
      son.addEventListener("click",(e)=>{
        // e.stopPropagation();
        console.log("son捕获 ",e.target)
      },true);
      son.addEventListener("click",(e)=>{
        console.log("son冒泡 ",e.target)
        // e.stopPropagation();
      });
      father.addEventListener("click",(e)=>{
        console.log("father冒泡",e.target)
      });
      sonson.addEventListener("click",(e)=>{
        console.log("sonson捕获 ",e.target)
      },true);
      sonson.addEventListener("click",(e)=>{
        console.log("sonson冒泡 ",e.target)
        // e.stopPropagation();
        // e.stopPropagation();
      });
      target.addEventListener("click",(e)=>{
        console.log("target捕获 ",e.target)
        // e.stopPropagation();

      },true);
      target.addEventListener("click",(e)=>{
        console.log("target冒泡 ",e.target)
        // e.stopPropagation();
      });

    </script>
  </body>
</html>
